<template>
  <MainContent title="活动审核" :content="false">
    <template #tab-bar>
      <search-bar>
        <template #normal>
          <el-form-item label="活动审核类型">
            <el-select v-model="searchForm.status" clearable placeholder="请选择活动审核状态">
              <el-option v-for="(item, index) in relationStatus" :label="item.label" :value="item.value" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- TODO 加权限 -->
            <el-button type="primary" @click="showExportData = true">导出</el-button>
          </el-form-item>
        </template>
      </search-bar>
      <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="我审批的" name="first">
          <el-radio-group v-model="tabPosition">
            <el-radio-button plain label="wait">待审列表</el-radio-button>
            <el-radio-button plain label="finish">已审列表</el-radio-button>
            <el-radio-button plain label="copy">抄送我的</el-radio-button>
          </el-radio-group>
          <wait-list v-if="tabPosition == 'wait'" :relationType="searchForm.status"></wait-list>
          <finish-list v-if="tabPosition == 'finish'" :relationType="searchForm.status"></finish-list>
          <copy-list v-if="tabPosition == 'copy'" :relationType="searchForm.status"></copy-list>
        </el-tab-pane>
        <el-tab-pane label="我提交的" name="second">
          <submit-list :relationType="searchForm.status"></submit-list>
        </el-tab-pane>
      </el-tabs>
    </template>

  </MainContent>
  <exportData v-model:show-dialog="showExportData" :search-data="searchForm" title="活动审核" export-type="applyInfoExport">
  </exportData>
</template>
<script lang="ts">
export default {
  name: 'VerifyActivity'
}
</script>
<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import waitList from './activity/wait.vue'
import finishList from './activity/finish.vue'
import submitList from './activity/submit.vue'
import copyList from './activity/copy.vue'
import exportData from "@/components/exportData/exportData.vue";
const showExportData = ref(false)
const activeName = ref('first')
const tabPosition = ref('wait')
const searchForm = ref({
  status: '',
  insId: ''
})
const relationStatus = ref([
  {
    label: '上线',
    value: 'activity_online'
  },
  {
    label: '编辑',
    value: 'activity_modify'
  },
])
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    // 待完善
    searchForm.value.insId = insId.value
  },
  {
    deep: true
  }
)

</script>
<style lang="scss" scoped>
:deep(.el-radio-group) {
  margin-bottom: 20px;
}
</style>